import React, { Component } from 'react'
import { collectApi } from '../../apis/homeApi'

import echarts from 'echarts'
import io from 'socket.io-client'
class PieNode extends Component {
  state = {
    _pieNode: React.createRef(),
    pieChart: null,
  }

  /* 监听事件和处理消息：
     1、使用 on 方法-监听服务器发送的事件，并使用 emit 方法-向服务器发送事件
     
     具体就是：
     1）监听服务器发送的 "connect" 事件
       connect事件是自定义的。它是WebSocket客户端（浏览器端）设置的一个事件，用于监听与WebSocket服务器的连接状态。当客户端成功连接到服务器时，会触发connect事件
          socket.on('connect', () => {
            console.log('已连接到服务器');
          });
     2）监听服务器发送的 "serverEvt" 事件
      serverEvt事件是自定义的。它是后端WebSocket服务器设置的一个事件，用于向前端发送实时数据
      socket.on('serverEvt', (data) => {
        console.log('收到服务器消息：', data);
      });

     3）向服务器发送 "clientEvt" 事件，并发送参数，指定需要获取的实时数据
     socket.emit('clientEvt', 'Hello, Server!');
     */
  componentDidMount() {
    let _this = this
    this.setState(
      {
        pieChart: echarts.init(this.state._pieNode.current),
      },
      () => {

        // 这里在setState的第二个参数中进行websoket的代码执行，
        // 原因是： setState更新状态是异步的，在第二个参数中，操作dom，我们可以确保，这个用于实现可视化的Dom已经初始化完毕，是最新的状态，此时就可以用拿到的数据来进行可视化渲染了
        let socket = io('ws://www.localhost:20000')
        let num = 0
        // connect事件是自定义的。它是WebSocket客户端（浏览器端）设置的一个事件，用于监听与WebSocket服务器的连接状态。当客户端成功连接到服务器时，会触发connect事件
        socket.on('connect', function () {
          // clientEvt--后端websocket设置的一个事件，  {type: 'getTodayHot'}---传给后端的参数
          socket.emit('clientEvt', { type: 'getTodayHot' })
        })

        // 监听后端的消息，接收后端实时数据
        // serverEvt事件是自定义的。它是后端WebSocket服务器设置的一个事件，用于向前端发送实时数据
        socket.on('serverEvt', function (data) {
          _this.pieLoop(data)
          num++
          if (num > 8) {
            socket.close()
          }
        })
      }
    )
  }

  async pieLoop(data) {
    let color = [
      '#2ca1ff',
      '#0adbfa',
      '#febe13',
      '#65e5dd',
      '#7b2cff',
      '#fd5151',
    ]
    let img = ''
    let nameArray = []
    let datas = []

    for (let i = 0; i < nameArray; i++) {
      nameArray.push(data[i].name)
      datas.push(
        {
          value: data[i].amount,
          name: data[i].name,
          itemStyle: {
            normal: {
              borderWidth: 8,
              shadowBlur: 20,
              borderRadius: 20,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
        },
        {
          value: 20000,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
            },
          },
        }
      )
    }

    let option = {
      backgroundColor: '#0A2E5D',
      color: color,
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 280,
              height: 252,
            },
            left: '20%',
            top: 'center',
          },
        ],
      },
      tooltip: {
        show: false,
      },
      legend: [
        {
          icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
          data: nameArray,
          align: 'left',
          textStyle: {
            color: '#fff',
          },
          itemGap: 20,
        },
      ],
      toolbox: {
        show: false,
      },
      series: [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          width: 280,
          height: 252,
          hoverAnimation: false,
          center: ['50%', '55%'],
          left: '20%',
          top: 'center',
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: datas,
        },
      ],
    }

    this.state.pieChart.setOption(option)
  }




  render() {
    return <div ref={this.state._pieNode} className="chart-box"></div>
  }
}

export default PieNode
